<script>
// 广告页面
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>
<template>
  <div class="">
    <div class="top">预览内容15秒，获取奖励</div>

    <div class="vidon">
      <video
        controls
        src="https://www.runoob.com/try/demo_source/movie.mp4"
      ></video>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.top {
}
.vidon {
  video {
    width: 100%;
  }

  //全屏按钮
  video::-webkit-media-controls-fullscreen-button {
    display: none;
  }
  //播放按钮
  // video::-webkit-media-controls-play-button {
  //     display: none;
  // }
  //进度条
  video::-webkit-media-controls-timeline {
    display: none;
  }
  //观看的当前时间
  video::-webkit-media-controls-current-time-display {
    display: none;
  }
  //剩余时间
  video::-webkit-media-controls-time-remaining-display {
    display: none;
  }
  //音量按钮
  video::-webkit-media-controls-mute-button {
    display: none;
  }
  video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
  }
  //音量的控制条
  video::-webkit-media-controls-volume-slider {
    display: none;
  }
  // //所有控件
  // video::-webkit-media-controls-enclosure{
  //     display: none;
  // }
}
</style>